<template>
  <div class="banner">
    <van-swipe
      class="my-swipe"
      indicator-color="white"
      :autoplay="3000"
      v-if="this.BannerList.length"
    >
      <van-swipe-item v-for="item in BannerList" :key="item.id">
        <img :src="item.picUrl" />
      </van-swipe-item>
    </van-swipe>
  </div>
</template>

<script>
export default {
  props: {
    BannerList: {
      type: Array
    }
  }
}
</script>

<style lang="stylus" scoped>
.banner >>> .van-swipe__indicator--active {
  width 16px;
  border-radius 8px;
  transition: color .3s;
}
.banner {
  width: 100%;
  height:0;
  padding-bottom: 39%;
  .my-swipe {
    .van-swipe-item {
      img {
        border-radius: 20px 0;
        width: 100%;
      }
    }
  }
}
</style>
